<template>
	<view>
		<u-popup  v-model="insureshow" mode="bottom" width="100%" ref="auth" :mask-close-able="false" :custom="true" :mask-click="false" @close="closeinsure">
            <view class="popone">
                <!-- <image class="bg" :src="ossThree('/uploads/20250404/a6740382ebb9492d9ed8c12c1e42d198.png')" mode="" /> -->
                <view class="phonenav">
                    <view class="cha" @click="closeinsure">
                        <image class="icon_gbcha" src="@/pages_admin/static/icon_gbcha.png" mode="" />
                    </view>
                    <text class="jiename">意外保障</text>
                    <view class="yaone">
                        <view class="yaleft">
                            <view class="yahead">
                                <text class="lingname">零工意外保障</text>
                                <u-switch class="ml" size="40" v-model="checked" active-color="#FF4D43"></u-switch>
                            </view>
                            <view class="lone">
                                <view class="shu">1</view>
                                <text class="ltxt">零工开工打卡后，连续保障24小时</text>
                            </view>
                            <view class="lone">
                                <view class="shu">2</view>
                                <view class="bzhang">
                                    <text class="ltxt">上下班路上均有保障</text>
                                    <text class="ltxtmiao">根据工伤保险条例:用工方需承担零工工作期间和上下班途中交通意外风险。</text>
                                </view>
                            </view>
                        </view>
                        <image class="img_bz" src="@/pages_admin/static/img_bz.png" mode="" />
                    </view>
                    <view class="fuwu">
                        <view class="fuone">
                            <text class="funame">服务包</text>
                            <view class="cheng">
                                <image class="bzhang" src="@/pages_admin/static/bzhang.png" mode="" />
                                <text>众安保险承保</text>
                            </view>
                            <view class="geng">
                                <text>更多详情</text>
                                <image class="icon_xgs" src="@/pages_admin/static/icon_xgs.png" mode="" />
                            </view>
                        </view>
                        <view class="fulist">
                            <view class="fuitem" :class="baoitem.id==item.id?'factive':''" v-for="(item,index) in baolist" :key="index" @click="baoitemClick(item)">
                                <image class="bgfu" src="@/pages_admin/static/img_xz.png" mode="" />
                               <view class="fuwen">
                                 <text class="wnum">{{item.name}}</text>
                                 <text class="wnummiao">{{item.score}}积分/人天</text>
                               </view>
                            </view>
                        </view>
                        <view class="yishuo">
                            <view class="yiitem">
                                <image class="icon_zs" src="@/pages_admin/static/icon_zs.png" mode="" />
                                <text class="yiname">意外伤害身故残疾</text>
                                <text class="yitxt">10万</text>
                            </view>
                            <view class="yiitem">
                                <image class="icon_zs" src="@/pages_admin/static/icon_zs.png" mode="" />
                                <text class="yiname">意外医疗</text>
                                <text class="yitxt">1万</text>
                            </view>
                        </view>
                        <view class="tougong">
                            <text class="touname">投保工种</text>
                            <view class="gzlist">
                                <text class="puname">{{title}}</text>
                                <image class="icon_xgs" src="@/pages_admin/static/icon_xgs.png" mode="" />
                            </view>
                        </view>
                        <view class="toubtn" @click="baoClick">确定保障方案</view>
                    </view>
                    
                </view>
            </view>
        </u-popup>
	</view>
</template>

<script>
	export default {
		name: 'ConfirmOrderPop',
		props: {
			insureshow: {
				type: Boolean,
				default: false
			},
            title:{
                type: String,
				default: ''
            },
            baolist:{
                type: Array,
            },
            baoitem:{
                type: Object,
            },
            insuranceist:{
                type: Boolean,
				default: false
            }

		},
        watch: {
			insureshow: { 
				handler(v) {
					this.checked = this.insuranceist
				},
				immediate: true
			}
		},
		data() {
			return {
                checked:false,
                newbaoitem:{}
			};
		},
		created() {
			
		},
		mounted() {

		},
		methods: {
            closeinsure(){
                this.$emit("closeinsure")
            },
            baoClick(){
                if(this.checked){
                    if(!this.baoitem.id){
                        this.$u.toast("请选择险种");
                        return;
                    }
                    this.$emit("baoClick",{
                        checked:this.checked,
                        baoitem:this.baoitem
                    })

                }else{
                    this.closeinsure()
                }
            },
            baoitemClick(item){
                if(!this.checked){
                    this.$u.toast("请先开启保障");
                    return;
                }
                // this.baoitem = item
                this.$emit("baoitemClick",item)
            }

		}
	};
</script>

<style lang="scss" scoped>
    /deep/.u-drawer-bottom{
        background-color: transparent;
    }
    .yaone{
        display: flex;
        flex-direction: row;
        padding: 0 40rpx 40rpx ;
        .yaleft{
            display: flex;
            flex-direction: column;
            width: 70%;
            .yahead{
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-bottom: 30rpx;
                .lingname{
                    font-weight: bold;
                    font-size: 36rpx;
                    color: #111111;
                    display: inline-block;
                    margin-right: 20rpx;
                }
            }
            .lone{
                display: flex;
                flex-direction: row;
                align-items: center;
                // margin-top: 30rpx;
                margin-bottom: 10rpx;
                .shu{
                    width: 40rpx;
                    height: 40rpx;
                    background: #FF5F40;
                    border-radius: 50%;
                    display: inline-block;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #FFFFFF;
                    margin-right: 10rpx;
                }
                .ltxt{
                    font-weight: 500;
                    font-size: 26rpx;
                    color: #333333;
                }
                .bzhang{
                    display: flex;
                    flex-direction: column;
                    justify-content: flex-start;
                    align-items: flex-start;
                    max-width: 86%;
                }
                .ltxtmiao{
                    font-weight: 500;
                    font-size: 20rpx;
                    color: #999999;
                    display: inline-block;
                }
            }
        }
    }
    .img_bz{
        margin-left: auto;
        width:136rpx;
        height: 185rpx;
    }
    .gonglist{
        max-height: 800rpx;
        margin: 30rpx 0;
        .gongitem{
            background: #FFFFFF;
            border-radius: 30rpx;
            margin: 0 0 20rpx;
            padding: 30rpx;
            display: flex;
            flex-direction: row;
            align-items: center;
            .gleft{
                display: flex;
                flex-direction: column;
                .gname{
                    font-weight: 800;
                    font-size: 36rpx;
                    color: #111111;
                }
                .gmiao{
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #999999;
                    max-width: 80%;
                    display: block;
                    margin-top: 10rpx;
                }
            }
            .quan{
                margin-left: auto;
                width: 38rpx;
                height: 38rpx;
            }
        }
    }
    .toubtn{
        height: 90rpx;
        background: linear-gradient(90deg, #FF8F39, #FF4D43);
        border-radius: 45rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: bold;
        font-size: 28rpx;
        color: #FFFFFF;
        width: 100%;
    }
	.popone{
        width: 100%;
        background: #FCF4F0;
        border-radius: 30rpx 30rpx 0rpx 0rpx;
        // height: 530rpx;
        .bg{
            position: absolute;
            width: 100%;
            height: 300rpx;
            border-radius: 30rpx 30rpx 0 0 ;
        }
        .icon_gbcha{
            width: 40rpx;
            height: 40rpx;
            margin-left: auto;
            position: absolute;
            right: 30rpx;
            top: 30rpx;
        }
        .yuedu{
            height: 80rpx;
            display: flex;
            padding: 0 30rpx;
            align-items: center;
            .icon_xz_n{
                width: 36rpx;
                height: 36rpx;
                margin-right: 8rpx;
            }
            .xy{
                font-weight: 500;
                font-size: 20rpx;
                color: #999999;
                display: block;
                width: 90%;
            }
            .xyhu{
                color: rgba(234, 89, 24, 1);
            }
        }
        .kaolv{
            font-weight: bold;
            font-size: 28rpx;
            color: #666666;
            display: block;
            text-align: center;
            margin-top: 20rpx;
        }
        .phonenav{
            position: relative;
            // margin: 30rpx;
            display: flex;
            flex-direction: column;
            // justify-content: center;
            // align-items: center;
            // padding: 40rpx 30rpx;
            .img_aq{
                width: 173rpx;
                height: 211rpx;
                margin-bottom: 20rpx;
            }
            .jiename{
                font-weight: bold;
                font-size: 36rpx;
                color: #111111;
                display: block;
                text-align: center;
                margin: 40rpx auto;
            }
            .queren{
                font-weight: 400;
                font-size: 24rpx;
                color: #666666;
                display: block;
                margin: 40rpx 0 80rpx;
            }
            .chaka{
                padding: 30rpx;
                width: 100%;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: #F6F7F9;
                border-radius: 16rpx;
                margin: 25rpx 0;
                .chaname{
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #111111;
                }
                .phonenum{
                    display: block;
                    font-weight: bold;
                    font-size: 50rpx;
                    color: #F06047;
                    margin: 10rpx 0;
                }
                .xiugai{
                    display: flex;
                    flex-direction: row;
                    align-items: center;
                    .noben{
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #666666;
                    }
                    .xiu{
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #F06047;
                        display: inline-block;
                        margin-left: 6rpx;
                    }
                }
            }
            .dianbtn{
                height: 90rpx;
                background: linear-gradient(90deg, #FF8F39, #FF4D43);
                border-radius: 45rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                width: 100%;
                margin-top: 20rpx;
                .bm{
                    font-weight: bold;
                    font-size: 28rpx;
                    color: #FFFFFF;
                }
                .bmmaio{
                    font-weight: 500;
                    font-size: 20rpx;
                    color: #FFFFFF;
                }
            }
        }
    }
    .fuwu{
        background: #FFFFFF;
        border-radius: 30rpx 30rpx 0rpx 0rpx;
        margin-top: -30rpx;
        position: relative;
        padding: 30rpx;
        .fuone{
            display: flex;
            flex-direction: row;
            align-items: center;
            .funame{
                font-weight: 800;
                font-size: 32rpx;
                color: #111111;
            }
            .cheng{
                background: #E9FFEB;
                border-radius: 6rpx;
                padding: 4rpx 20rpx;
                margin-left: 14rpx;
                display: flex;
                flex-direction: row;
                align-items: center;
                .bzhang{
                    width: 24rpx;
                    height: 24rpx;
                    margin-right: 8rpx;
                }
                text{
                    font-weight: 500;
                    font-size: 24rpx;
                    color: #16B925;
                }
            }
            .geng{
                margin-left: auto;
                display: flex;
                flex-direction: row;
                align-items: center;
                text{
                    font-weight: 400;
                    font-size: 26rpx;
                    color: #999999;
                }
                .icon_xgs{
                    width: 24rpx;
                    height: 24rpx;
                    margin-left: 10rpx;
                }
            }
        }
        .fulist{
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            margin: 30rpx 0 20rpx;
            .fuitem{
                width: 160rpx;
                height: 130rpx;
                background: #F6F7F9;
                border-radius: 20rpx;
                margin: 0 12rpx 15rpx 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                position: relative;
                .bgfu{
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    display: none;
                }
                .fuwen{
                    position: relative;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    justify-content: center;
                    .wnum{
                        font-weight: bold;
                        font-size: 36rpx;
                        color: #111111;
                    }
                    .wnummiao{
                        font-weight: 400;
                        font-size: 20rpx;
                        color: #111111;
                    }
                }
            }
            .factive{
                .bgfu{
                    display: inline-block;
                }
                .fuwen{
                    .wnum{
                        color: #16B925;
                    }
                    .wnummiao{
                        color: #16B925;
                    }
                }
            }
        }
        .yishuo{
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 40rpx;
            .yiitem{
                display: flex;
                flex-direction: row;
                align-items: center;
                margin-right: 10rpx;
            }
            .icon_zs{
                width: 28rpx;
                margin-right: 3rpx;
                height: 28rpx;
            }
            .yiname{
                font-weight: 500;
                font-size: 26rpx;
                color: #999999;
            }
            .yitxt{
                font-weight: 500;
                font-size: 26rpx;
                color: #16B925;
            }

        }
    }
    .tougong{
        display: flex;
        flex-direction: column;
        margin-bottom: 80rpx;
        .touname{
            font-weight: 800;
            font-size: 32rpx;
            color: #111111;
            display: block;
            margin-bottom: 20rpx;
        }
        .gzlist{
            display: flex;
            flex-direction: row;
            padding: 30rpx 30rpx;
            background: #F5F5F5;
            border-radius: 10rpx;
            align-items: center;
        }
        .icon_xgs{
            width: 24rpx;
            height: 24rpx;
            margin-left: auto;
        }
    }
</style>
